<!doctype html>
<html ng-app="webpageApp">
<head>
<meta charset="utf-8">
<title>前端页面操作</title>
<link href='styles/content.css' rel='stylesheet' />
</head>
<body ng-controller="webDocument">
  <!-- <input type="text" ng-model='newUrl'>
  <button ng-click="getUrl(newUrl)" >确定</button> -->
  <!-- <button ng-click='refresh()'>refresh</button> -->
  <!-- <iframe frameborder="0" width="100%" height="1000px" id="iframeId2"></iframe> -->
  <div>
    当前元素
    <ul>
      <li>
        名称: <input type='text' ng-model='current.name' placeholder="请输入字段名称"/>
        <button ng-click='clear("name")'>清空</button>
      </li>
      <li>
        路径: <input type="text" ng-model='current.path' />
        <button ng-click='clear("path")'>清空</button>
      </li>
      <li>
        xpath路径: <input type="text" ng-model='current.xpath' />
        <button ng-click='clear("xpath")'>清空</button>
      </li>
    </ul>
    <!-- <button class="btn btn-default" ng-click="save(current)">保存</button> -->
    <!-- <button class="btn btn-default" ng-click="reset()">重置</button> -->
  </div>

  <div>
    模板


    <ul ng-include="'recursion'" ng-init='rules=ruleList.children;parent=ruleList'></ul>
    {{ruleList}}
      <!-- <li ng-repeat='set in setList' ng-init='outerIndex = $index' ng-click='chooseSet(outerIndex)' ng-class='{true:"active", false:""}[outerIndex==setIndex]'>
        {{set.name}}
        <ul>
          <li ng-repeat='rule in set.ruleList' ng-init='innerIndex=$index' ng-click='choose(innerIndex)' ng-class='{true:"active", false:""}[rule._id==current._id]'>
            {{rule}}
            <button class="btn btn-default" ng-click="remove($index)">删除</button>
          </li>
        </ul>
        <button class="btn btn-default" ng-click="removeSet($index)">删除集合</button>
      </li>

    </ul>
    <button class='btn btn-default' ng-click='addSet()'>增加集合</button> -->
  </div>
  <!-- <div>
    <ul>

      <li ng-repeat='set in setList' ng-init='outerIndex = $index' ng-click='chooseSet(outerIndex)' ng-class='{true:"active", false:""}[outerIndex==setIndex]'>
        {{set.name}}
        <ul>
          <li ng-repeat='rule in set.ruleList' ng-init='innerIndex=$index' ng-click='choose(innerIndex)' ng-class='{true:"active", false:""}[rule._id==current._id]'>
            {{rule}}
            <button class="btn btn-default" ng-click="remove($index)">删除</button>
          </li>
        </ul>
        <button class="btn btn-default" ng-click="removeSet($index)">删除集合</button>
      </li>

    </ul>
    <button class='btn btn-default' ng-click='addSet()'>增加集合</button>
  </div> -->
  <crawler-iframe path='current.path' xpath='current.xpath' is-new='isNew'></crawler-iframe>
  <!-- 递归模板 -->
  <script id="recursion" type="text/ng-template">
    <!-- <li ng-repeat="item in cate"> -->
    <li ng-repeat='rule in rules'>
      <!-- <a href="{{rule.cateId}}">{{item.cateName}}</a> -->
      <span ng-click='choose( rule)'>{{rule.name}}</span>
      <button ng-click='add(rule)'>新增子字段</button>
      <button ng-click='remove(parent, $index)'>删除字段</button>
      <ul ng-if="rule.children.length" ng-include="'recursion'"  ng-init="rules=rule.children;parent=rule"></ul>
    </li>
    <button ng-click='add(parent)'>新增字段</button>

        <!-- <a href="{{item.cateId}}">{{item.cateName}}</a>
        <ul ng-if="item.child.length" ng-include="'recursion'"  ng-init="cate=item.child"></ul>
    </li> -->
  </script>
  <!-- <div>
    模板
    <pre>

    </pre>
  </div> -->
  <!-- <iframe ng-src='{{url}}' frameborder="0" width="100%" scrolling="no" height="100%" id="iframeId" onload="changeFrameHeight()"></iframe> -->
  <script type="text/javascript" src="javascripts/jquery.min.js"></script>
  <script type="text/javascript" src="javascripts/jquery.cookie.js"></script>
  <script src='javascripts/angular.min.js'></script>
  <script src='javascripts/angular-mocks.js'></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="javascripts/tree_mirror.js"></script>
  <!-- <script src="javascripts/mirror.js"></script> -->
  <script type="text/javascript" src="javascripts/webDocument.js"></script>
  <script type="text/javascript" src="javascripts/iframe.directive.js"></script>
  <script type="text/javascript" src="javascripts/helper.service.js"></script>
  <!-- <script type="text/javascript">
    function changeFrameHeight(){
        var ifm= document.getElementById("iframeId");
        ifm.height=document.documentElement.clientHeight + 50;
    };
    window.onresize=function(){
         changeFrameHeight();
    }
  </script> -->
</body>
</html>
